<template>
  <div id="keepermanage" style= "height:100%;width:100%;padding: 0;background-image: linear-gradient(to right top, #a1d1ff, #c2daff, #dce5ff, #f0f1ff, #ffffff);">
    <div class="searchwrapper">
      <p>姓名</p>
      <el-input
          placeholder="请输入内容"
          prefix-icon="el-icon-search"
          v-model="keeperName"
          style="width: 200px;margin-right:20px"
      >
      </el-input>
      <p>工号</p>
      <el-input
          placeholder="请输入内容"
          prefix-icon="el-icon-search"
          v-model="keeperAccount"
          style="width: 200px;margin-right: 100px"
      >
      </el-input>
      <el-button style="margin-left: 20px" type="primary" icon="el-icon-search" @click="searchKeeperByNameAndAccount">搜索</el-button>
      <el-button icon="el-icon-circle-plus-outline" size="small" type="primary" style="width: 100px;margin-left: 30px" @click="addOne">添加</el-button>
      <div style="width: 500px"></div>
    </div>
    <div id="table" style="margin-left: 50px;margin-right: 50px">
      <el-table
          :data="keeperList"
          width="90%"
      >
        <el-table-column
            prop="account"
            label="工号"
            width="150">
        </el-table-column>
        <el-table-column
            prop="name"
            label="姓名"
        >
        </el-table-column>
        <el-table-column
            prop="gender"
            label="性别"
        >
        </el-table-column>
        <el-table-column
            prop="nation"
            label="民族"
        >
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            width="300">
          <template slot-scope="scope">
            <el-button type="text" size="small"   @click="showKeeper(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNo"
          :page-sizes="[2,5,10]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
      >
      </el-pagination>
      <keeper-editdialog @ok="searchKeeperByNameAndAccount" ref="KeeperEditDialog"></keeper-editdialog>
      <keeper-add-dialog @ok="searchKeeperByNameAndAccount" ref="KeeperAddDialog"></keeper-add-dialog>
    </div>
  </div>
</template>
<script>
import {_searchKeeperByNameAndAccount, _keeperAll} from '../../../api/super_admin'
import keeperEditdialog from '../components/editComponents/KeeperEditdialog.vue'
import keeperAddDialog from '../components/addComponents/KeeperAddDialog.vue'
export default {
  name: 'KeeperManage',
  components: {
    keeperEditdialog,
    keeperAddDialog
  },
  created () {
    const DOT = {
      pageSize: 10,
      pageNo: 1,
      data: {}
    }
    _keeperAll(DOT).then(res => {
      if (res.status) {
        this.keeperList = res.data
      } else {
        this.$message({
          message: res.message,
          type: 'error'
        })
      }
    })
  },
  data () {
    return {
      keeperList: [],
      keeperName: '',
      preKeeperName: '',
      keeperAccount: '',
      preKeeperAccount: '',
      total: 0,
      pageNo: 1,
      pageSize: 10
    }
  },
  methods: {
    getFirstPage () {
      const DOT = {
        pageSize: this.pageSize,
        pageNo: 1,
        data: {
          keeperName: this.preKeeperName,
          keeperAccount: this.preKeeperAccount
        }
      }
      _searchKeeperByNameAndAccount(DOT).then(res => {
        if (res.status) {
          this.keeperList = res.data
          this.pageNo = 1
        } else {
          this.$message({
            message: res.message,
            type: 'error'
          })
        }
      })
    },
    getKeeper () {
      const DOT = {
        pageSize: this.pageSize,
        pageNo: this.pageNo,
        data: {
          keeperName: this.preKeeperName,
          keeperAccount: this.preKeeperAccount
        }
      }
      _searchKeeperByNameAndAccount(DOT).then(res => {
        if (res.status) {
          this.keeperList = res.data
        } else {
          this.$message({
            message: res.message,
            type: 'error'
          })
        }
      })
    },
    searchKeeperByNameAndAccount () {
      this.preKeeperName = this.keeperName
      this.preKeeperAccount = this.keeperAccount
      this.getFirstPage()
    },
    handleSizeChange (value) {
      this.pageSize = value
      this.getFirstPage()
    },
    handleCurrentChange (value) {
      this.pageNo = value
      this.getKeeper()
    },
    showKeeper (value) {
      this.$refs.KeeperEditDialog.show(value)
    },
    addOne () {
      this.$refs.KeeperAddDialog.show()
    }
  }
}
</script>

<style scoped>
.searchwrapper {
  margin-top: 10px;
  display: flex; /* 使用 Flexbox 布局 */
  align-items: center; /* 垂直居中对齐 */
}
.searchwrapper p {
  margin-left: 200px;
  margin-right: 10px; /* 调整 p 标签与 el-input 之间的间距 */
  font-weight: bold; /* 可选：设置 p 标签的字体加粗 */
}

.searchwrapper .el-input {
  flex: 1; /* el-input 自动填充剩余空间 */
}
</style>
